<template>
  <div class="work-set">
    <div class="table-title">
      <general-button
        @operation="addsopFun"
        btnText="添加"
        btnPowerNum="52BD8DC5-70FD-4B76-BF57-3C2AA9C685EF"
        :btnDisabled="!topcurrentInfo.RouteOperationID ? true : false"
      ></general-button>
      <general-button
        @operation="allDel"
        btnText="批量删除"
        btnPowerNum="5D21BA7E-35AA-4F2E-B201-B8BFFEEF6764"
        :btnDisabled="!topcurrentInfo.RouteOperationID ? true : false"
      ></general-button>
    </div>
    <div class="table-box">
      <div class="operation-table">
        <div class="operation-table-box">
          <a-table
            className="components-table-demo-nested"
            :columns="workSetColumns"
            :row-key="(record) => record.JobRouteOperationID"
            :data-source="associatedWorkSetData"
            :loading="workSetLoading"
            :scroll="{ y: tableHegint }"
            :row-selection="{
              selectedRowKeys: workSetRowKeys,
              onChange: workSetChangeFun,
            }"
            :pagination="false"
            size="middle"
          >
            <!-- <template slot="name" slot-scope="name">
          {{ name }}
        </template> -->
            <template slot="action" slot-scope="text, record">
              <div class="chart-manage">
                <!-- <a-icon
              type="edit"
              class="icon-class"
              @click="editSopFun(record)"
            /> -->
                <a-icon type="delete" class="icon-class" @click="Del(record)" />
              </div>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <!-- 添加工作集 -->
    <a-modal
      v-model="addWrokSetModel"
      title="添加工作集"
      :width="800"
      :maskClosable="false"
      @cancel="workSetCancel"
    >
      <a-input-search
        placeholder="输入关键词搜索"
        style="margin-bottom: 16px"
        @change="handleSearch"
      />
      <a-tree
        v-model="checkedKeys"
        checkable
        :tree-data="filteredWorkSetData"
        @select="onSelect"
        :replaceFields="{
          children: 'JobGroupList',
          title: 'JobGroupName',
          key: 'JobGroupID',
        }"
      />
      <template slot="footer">
        <a-button key="back" @click="workSetCancel">取消</a-button>
        <a-button key="submit" type="primary" @click="workSetOk">提交</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import GeneralButton from "@/components/be-current-btn.vue";

import {
  getJobGroupToList,
  getJobrouteoperationrelationsToList,
  insJobrouteoperationrelations,
  delJobrouteoperationrelations,
} from "@/api/JobRouteOperationRelation";
export default {
  props: ["RouteID", "topcurrentInfo", "technoLogyInfo", "tableHegint"], //工艺id，选中表格工序项信息，选中工艺信息
  components: {
    GeneralButton,
  },
  data() {
    return {
      searchText: "", //搜索关键词
      checkedKeys: [], //树形选中的id
      addWrokSetModel: false, //添加工作集弹窗
      workSetTableHegint: 0, //表格高度
      workSetColumns: [
        {
          title: "序号",
          dataIndex: "num",
          sorter: true,
          width: "8%",
          align: "center",
        },
        {
          title: "工作集类型",
          dataIndex: "JobGroupTypeName",
          sorter: true,
          align: "center",
        },
        {
          title: "工作集名称",
          dataIndex: "JobGroupName",
          sorter: true,
          align: "center",
        },
        {
          title: "工作集版本号",
          dataIndex: "JobTempletVisionOut",
          sorter: true,
          align: "center",
        },
        {
          title: "操作",
          dataIndex: "operate",
          width: "15%",
          align: "center",
          scopedSlots: { customRender: "action" },
        },
      ], //表头
      workSetData: [], //工作集
      associatedWorkSetData: [], //关联的工作集数据
      workSetLoading: false, //表格loading
      workSetRowKeys: [], //表格选中ID
    };
  },
  methods: {
    //表格选中
    workSetChangeFun(key) {
      this.workSetRowKeys = key;
    },
    //添加方法
    addsopFun() {
      this.getJobGroupToList();
    },
    //批量删除
    allDel() {
      let that = this;
      this.$confirm({
        title: `取消关联【${this.workSetRowKeys.length}】项`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          let Array = [];

          that.workSetRowKeys.map((item) => {
            let obj = {
              JobRouteOperationID: item,
            };
            Array.push(obj);
          });
          let res = await delJobrouteoperationrelations(Array);
          if (res.Data == "") {
            that.$message.info("成功");
          } else {
            that.$message.error(res.Data);
          }
          that.getJobrouteoperationrelationsToList();
        },
        onCancel() {},
      });
    },
    //单项删除
    Del(item) {
      let that = this;
      this.$confirm({
        title: `取消关联【${item.JobGroupName}】`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        async onOk() {
          let res = await delJobrouteoperationrelations([item]);
          if (res.Data == "") {
            that.$message.info("成功");
          } else {
            that.$message.error(res.Data);
          }
          that.getJobrouteoperationrelationsToList();
        },
        onCancel() {},
      });
    },
    //关闭添加工作集
    workSetCancel() {
      this.checkedKeys = []; //清除选中项
      this.addWrokSetModel = false;
    },
    //提交绑定工作集
    async workSetOk() {
      let Array = [];
      let { RouteOperationID } = this.topcurrentInfo;
      this.checkedKeys.map((item) => {
        let obj = {
          routeOperationID: RouteOperationID,
          jobGroupID: item,
        };
        Array.push(obj);
      });
      let res = await insJobrouteoperationrelations(Array);
      this.$message.success("关联成功");
      this.getJobrouteoperationrelationsToList();
      this.workSetCancel();
    },

    //点击树节点
    onSelect() {},

    //搜索工作集
    handleSearch(e) {
      this.searchText = e.target.value;
    },

    //查询已绑定的工作集
    async getJobrouteoperationrelationsToList() {
      let { RouteOperationID } = this.topcurrentInfo;
      let data = {
        RouteOperationID,
      };
      let res = await getJobrouteoperationrelationsToList(data);
      this.associatedWorkSetData = res.Data;
      let list = [];
      this.associatedWorkSetData.map((item, index) => {
        item.num = index + 1;
        list.push(item.JobGroupID);
      });
      this.checkedKeys = list;
    },
    //查询工作集
    async getJobGroupToList() {
      let { RouteOperationID } = this.topcurrentInfo;
      let data = {
        RouteOperationID,
      };
      let res = await getJobGroupToList(data);
      this.workSetData = res.Data;
      this.workSetData.map((item) => {
        item.JobGroupName = item.JobGroupTypeName;
        item.JobGroupID = item.JobGroupTypeID;
        item.disabled = true;
        item.JobGroupList.map((itm, index) => {
          itm.JobGroupName = itm.JobGroupName + " - " + itm.JobTempletVisionOut;
        });
      });
      this.addWrokSetModel = true;
    },
  },
  computed: {
    filteredWorkSetData() {
      if (!this.searchText) return this.workSetData;

      const filterNode = (node) => {
        if (
          node.JobGroupName.toLowerCase().includes(
            this.searchText.toLowerCase()
          )
        ) {
          return true;
        }
        if (
          node.JobGroupList &&
          node.JobGroupList.some((child) => filterNode(child))
        ) {
          return true;
        }
        return false;
      };

      return this.workSetData.filter((node) => filterNode(node));
    },
  },

  watch: {
    topcurrentInfo: {
      handler(newValue, oldValue) {
        this.getJobrouteoperationrelationsToList();
      },
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.work-set {
  height: 100%;
  -webkit-user-drag: none;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .table-title {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.625rem;

    button {
      margin-right: 1.25rem;
    }

    button :last-child {
      margin-right: 0;
    }
  }
  .table-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;

    .operation-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      .operation-table-box {
        height: 100%;
        flex: 2;
      }
    }
  }

  /deep/ .clickRowStyl {
    background: #e6f7ff !important;
    color: #000000 !important;
  }
}

/deep/ .ant-modal {
  height: 50%;

  .ant-modal-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .ant-modal-body {
      flex: 1;
      overflow-y: auto;
    }
  }
}
</style>
